<div class="content-margin ongoing-tasks-stats">
    <div class="color-definitions">
        <div class="axis"></div>
        <div class="gaps"></div>
        <div class="brushChartColor"></div>
        <div class="brushChartStrokeColor"></div>
        <div class="trackBackground"></div>
        <div class="separatorLine"></div>
        <div class="trackNameBg"></div>
        <div class="trackNameFg"></div>
        <div class="trackDirectionText"></div>
        <div class="openedTrackArrow"></div>
        <div class="closedTrackArrow"></div>
        <div class="collectionNameTextColor"></div>
        <div class="itemWithError"></div>
        <div class="progressStripes"></div>
        <div class="stripeTextColor"></div>
        
        <div class="tracks">
            <div class="replication" data-property="Replication"></div>
            <div class="networkRead" data-property="Network/Read"></div>
            <div class="networkWrite" data-property="Network/Write"></div>
            <div class="storageRead" data-property="Storage/Read"></div>
            <div class="storageWrite" data-property="Storage/Write"></div>
            <div class="networkDocumentRead" data-property="Network/DocumentRead"></div>
            <div class="networkAttachmentRead" data-property="Network/AttachmentRead"></div>
            <div class="networkTombstoneRead" data-property="Network/TombstoneRead"></div>
            <div class="storageDocumentRead" data-property="Storage/DocumentRead"></div>
            <div class="storageTombstoneRead" data-property="Storage/TombstoneRead"></div>
            <div class="storageAttachmentRead" data-property="Storage/AttachmentRead"></div>
            <div class="storageCounterRead" data-property="Storage/CounterRead"></div>
            <div class="storageTimeSeriesRead" data-property="Storage/TimeSeriesRead"></div>
            <div class="modelGenerate" data-property="Model/Generate"></div>
            <div class="storageWriteEmbeddings" data-property="Storage/Embeddings"></div>
            <div class="etl" data-property="ETL"></div>
            <div class="embeddingsGeneration" data-property="Embeddings Generation"></div>
            <div class="extract" data-property="Extract"></div>
            <div class="transform" data-property="Transform"></div>
            <div class="load" data-property="Load"></div>
            <div class="loadLocal" data-property="Load/Local"></div>
            <div class="loadUpload" data-property="Load/Upload"></div>
            <div class="loadLocalChild" data-property="Load/Local/Child"></div>
            <div class="loadUploadChild" data-property="Load/Upload/Child"></div>
            <div class="genAi" data-property="GenAI"></div>
            <div class="genAiLoadToModel" data-property="GenAI/LoadToModel"></div>
            <div class="genAiUpdatePhase" data-property="GenAI/UpdatePhase"></div>
            <div class="modelLoad" data-property="Model/Load"></div>
            <div class="connectionPending" data-property="ConnectionPending"></div>
            <div class="connectionActive" data-property="ConnectionActive"></div>
            <div class="batch" data-property="Batch"></div>
            <div class="batchSendDocuments" data-property="BatchSendDocuments"></div>
            <div class="batchWaitForAcknowledge" data-property="BatchWaitForAcknowledge"></div>
            <div class="connectionAborted" data-property="ConnectionAborted"></div>
            <div class="connectionRejected" data-property="ConnectionRejected"></div>
            <div class="connectionErrorBackground" data-property="ConnectionErrorBackground"></div>
            <div class="aggregatedBatchesInfo" data-property="AggregatedBatchesInfo"></div>
            <div class="consume" data-property="Consume"></div>
            <div class="queueReading" data-property="QueueReading"></div>
            <div class="scriptProcessing" data-property="ScriptProcessing"></div>
            <div class="unknownOperation" data-property="UnknownOperation"></div>
        </div>
    </div>
    <div class="flex-vertical absolute-fill">
        <div class="flex-horizontal margin-bottom margin-bottom-sm">
            <div class="form-inline">
                <input type="text" accesskey="/" class="form-control" placeholder="Filter" title="Filter tasks (Alt+/)" data-bind="textInput: searchText, enable: hasAnyData" />

                <button class="btn btn-default" data-bind="click: expandAll, visible: canExpandAll, enable: hasAnyData" title="Expand all tasks performance details"><i class="icon-expand"></i><span>Expand all</span></button>
                <button class="btn btn-default" data-bind="click: collapseAll, visible: !canExpandAll(), enable: hasAnyData" title="Collapse all tasks performance details"><i class="icon-collapse"></i><span>Collapse all</span></button>
                <button class="btn btn-default" data-bind="click: exportAsJson, enable: hasAnyData, visible: !isImport()" title="Export current tasks graph to a file">
                    <i class="icon-export"></i><span>Export</span>
                </button>
                <label for="importFilePicker" class="btn btn-default">
                    <i class="icon-import"></i><span>Import</span>
                </label>
                <div class="input-group file-input" title="Import performance graph file">
                    <input type="file" id="importFilePicker" data-bind="event: { change: _.partial(fileSelected, $element) }" tabindex="-1" accept=".json">
                </div>
            </div>
        </div>
        <div class="flex-horizontal flex-shrink-0">
            <div data-bind="visible: (liveViewReplicationClient() || liveViewEtlClient()) && !bufferIsFull()">
                <small>Data buffer usage: <span data-bind="text: bufferUsage() + '%'"></span></small>
            </div>
            <div data-bind="visible: bufferIsFull">
                <small>Data buffer is full, clear graph data to continue</small>
            </div>
            <div class="flex-separator"></div>

            <button class="btn btn-default btn-sm margin-right margin-right-sm" data-bind="click: clearBrush, visible: clearSelectionVisible">
                <span>Clear selection</span>
            </button>
            <button class="btn btn-sm btn-default" data-bind="click: closeImport, visible: isImport" title="Return to currently selected database tasks graph">
                <i class="icon-cancel"></i><span data-bind="text: 'Close import (' + importFileName() + ')'">Close import</span>
            </button>
            <div class="btn-group" data-bind="visible: !isImport()">
                <button class="btn btn-sm btn-info btn-checkable" data-bind="click: toggleScroll, css: { active: autoScroll }">
                    <i class="icon-logs"></i> <span>Monitoring (tail -f)</span>
                </button>
                <button class="btn btn-sm btn-danger" data-bind="click: clearGraphWithConfirm">
                    <i class="icon-cancel"></i><span>Clear graph</span>
                </button>
            </div>
        </div>
        
        <div class="flex-grow dynamic-container">
            <div data-bind="visible: !hasAnyData()">
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3">
                        <div data-bind="visible: !loading()">
                            <i class="icon-xl icon-empty-set text-muted"></i>
                            <h2 class="text-center text-muted">No data.</h2>
                        </div>
                        <div data-bind="visible: loading()">
                            <i class="icon-xl global-spinner text-muted"></i>
                            <h2 class="text-center text-muted">Loading...</h2>
                        </div>
                    </div>
                </div>
            </div>

            <section id="ongoingTasksStats" style="position: relative" data-bind="visible: hasAnyData">
                <section class="metricsContainer" id="ongoingTasksStatsContainer">
                    <div class="tooltip tooltip-inner" style="opacity: 0; display: none">
                    </div>
                </section>
            </section>
        </div>
    </div>
</div>
